<template>
    <div class="service-ad-pic_wrapper">
        <img :src="adPicUrl" alt="" />
    </div>
    <nav class="service-nav">
        <ul class="service-category">
            <li>
                <a
                    v-logAction="{
                        page: currentRouteData.path,
                        item: 'seveiceList',
                        descriptions: '用户点击美食外卖按钮',
                    }"
                    class="plain-link"
                >
                    {{ t('serviceList.filterItems.foodTakeaway') }}
                </a>
            </li>
            <li>
                <a
                    v-logAction="{
                        page: currentRouteData.path,
                        item: 'seveiceList',
                        descriptions: '用户点击宠物按钮',
                    }"
                    class="plain-link"
                >
                    {{ t('serviceList.filterItems.petService') }}
                </a>
            </li>
            <li>
                <a
                    v-logAction="{
                        page: currentRouteData.path,
                        item: 'seveiceList',
                        descriptions: '用户点击家庭保洁按钮',
                    }"
                    class="plain-link"
                >
                    {{ t('serviceList.filterItems.houseKeeping') }}
                </a>
            </li>
            <li>
                <a
                    v-logAction="{
                        page: currentRouteData.path,
                        item: 'seveiceList',
                        descriptions: '用户点击房屋维修按钮',
                    }"
                    class="plain-link"
                >
                    {{ t('serviceList.filterItems.houseMaintenance') }}
                </a>
            </li>
            <li>
                <a
                    v-logAction="{
                        page: currentRouteData.path,
                        item: 'seveiceList',
                        descriptions: '用户点击汽车服务按钮',
                    }"
                    class="plain-link"
                >
                    {{ t('serviceList.filterItems.carService') }}
                </a>
            </li>
            <li>
                <a
                    v-logAction="{
                        page: currentRouteData.path,
                        item: 'seveiceList',
                        descriptions: '用户点击搬家按钮',
                    }"
                    class="plain-link"
                >
                    {{ t('serviceList.filterItems.movingService') }}
                </a>
            </li>
        </ul>
        <div class="service-filter">
            <div class="service-filter_icon"></div>
        </div>
    </nav>
    <ServiceListContent :serviceList="serviceList" />
    <ElPagination
        class="mt20"
        :pageSize="serviceQueryParams.size"
        layout="total, prev, pager, next"
        :total="total"
        @currentChange="handleCurrentChange"
    ></ElPagination>
</template>

<script lang="ts" setup>
import { reactive, ref, Ref } from 'vue';
import ServiceListContent from '@/views/ServiceList/Components/ServiceListContent.vue';
import { getServiceIndexList } from '@/api/api.query.util';
import { Service } from '@/types/service.d';
import { useRouter } from 'vue-router';
import { t } from '@/i18n';
const router = useRouter();
const currentRouteData = router.currentRoute.value;
const adPicUrl = ref(require('@/assets/image/guanggaowei@2x.png'));

const serviceQueryParams = reactive({
    serviceName: '',
    current: 1,
    size: 10,
});
const serviceList: Ref<Array<Service>> = ref([]);
const total: Ref<number> = ref(0);

// 获取服务列表
getService();

async function getService() {
    const result = await getServiceIndexList({
        method: 'POST',
        data: serviceQueryParams,
    });

    serviceList.value = result.result.records || [];
    total.value = result.result.total;
}

function handleCurrentChange(current: number) {
    serviceQueryParams.current = current;
    getService();
}
</script>

<style scoped>
.service-ad-pic_wrapper {
    height: 128px;
    margin-bottom: 16px;
}
.service-ad-pic_wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.service-nav {
    display: flex;
    justify-content: space-between;
    height: 50px;
    background-color: var(--section-color);
    border-radius: var(--border-radius);
    margin-bottom: 18px;
}

.service-category {
    display: flex;
}

.service-category > li {
    display: flex;
    align-items: center;
    padding: 0 40px;
}

.service-filter_icon {
    width: 16px;
    height: 16px;
    background: url('~@/assets/image/shaixuan_default@2x.png') no-repeat center center / 16px;
    cursor: pointer;
}

.service-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
}

.mt20 {
    margin-top: 20px;
}
</style>
